<template>
  <div class="addGoods">
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="80px">
      <el-form-item label="货物名称" prop="goodsName">
        <el-input v-model="form.goodsName" placeholder="输入货物名称,多个货物名称以逗号分隔"></el-input>
      </el-form-item>
      <el-form-item label="货物类型" prop="goodsType">
        <el-select filterable clearable v-model="form.goodsType" placeholder="选择货物类型">
          <el-option v-for="(item,index) in goodTypeList" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit('ruleForm')">立即添加</el-button>
        <!-- <el-button>取消</el-button> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {addGoods} from '@/api/set';
export default {
  name: "addGoods",
  props: {
    goodTypeList: {
      default: [],
      type: Array
    }
  },
  data() {
    return {
      form: {
        goodsName: "",
        goodsType: ""
      },
      rules: {
        goodsName: [
          { required: true, message: "请输入货物名称", trigger: "blur" }
        ],
        goodsType: [
          { required: true, message: "请选择货物类型", trigger: "change" }
        ]
      }
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    async initial() {},
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
            //特殊处理货物名称可传多个 中文逗号转为英文逗号
            this.form.goodsName = this.form.goodsName.replaceAll('，',',');
            
          let result = await addGoods(this.form);
            if(result.code == 200){
                this.$message.success(result.msg || '添加成功');
                setTimeout(() => {
                    this.$emit('refresh');
                }, 500);
            }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.addGoods {
}
</style>
